《uniapp 获取当前设备信息》

在 Vue 2 和 Vue 3 中获取设备信息

一、简介

在 UniApp 中，我们可以使用 uni.getSystemInfo() 或 uni.getSystemInfoSync() 来获取设备信息。两者的区别在于：

uni.getSystemInfo() 是异步方法，返回一个 Promise 对象。

uni.getSystemInfoSync() 是同步方法，直接返回设备信息对象。

获取设备信息不仅能帮助我们调整页面布局，还能根据平台差异化提供不同的 UI 和功能。

二、Vue 2 获取设备信息

  1. 使用异步方法 uni.getSystemInfo()

在 Vue 2 中，通常通过 mounted() 生命周期函数获取设备信息。以下是示例代码：

  1. 使用同步方法 uni.getSystemInfoSync()

三、Vue 3 获取设备信息

  1. 使用异步方法 uni.getSystemInfo()
  1. 使用同步方法 uni.getSystemInfoSync()

在 Vue 2 和 Vue 3 中获取设备信息

一、简介

在 UniApp 中，我们可以使用 uni.getSystemInfo() 或 uni.getSystemInfoSync() 来获取设备信息。两者的区别在于：

  • uni.getSystemInfo() 是异步方法，返回一个 Promise 对象。
  • uni.getSystemInfoSync() 是同步方法，直接返回设备信息对象。

获取设备信息不仅能帮助我们调整页面布局，还能根据平台差异化提供不同的 UI 和功能。

二、Vue 2 获取设备信息

1. 使用异步方法 uni.getSystemInfo()

在 Vue 2 中，通常通过 mounted() 生命周期函数获取设备信息。以下是示例代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<template>
  <view>
    <text>{{ deviceInfo }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      deviceInfo: ''
    };
  },
  mounted() {
    this.getDeviceInfo();
  },
  methods: {
    getDeviceInfo() {
      uni.getSystemInfo({
        success: (res) => {
          this.deviceInfo = `设备型号：${res.model}, 操作系统：${res.system}, 屏幕尺寸：${res.screenWidth}x${res.screenHeight}`;
        },
        fail: (err) => {
          console.error('获取设备信息失败：', err);
        }
      });
    }
  }
};
</script>

<style scoped>
text {
  color: #333;
  font-size: 16px;
  line-height: 1.5;
  margin-top: 20px;
}
</style>

2. 使用同步方法 uni.getSystemInfoSync()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<template>
  <view>
    <text>{{ deviceInfo }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      deviceInfo: ''
    };
  },
  mounted() {
    this.getDeviceInfoSync();
  },
  methods: {
    getDeviceInfoSync() {
      try {
        const res = uni.getSystemInfoSync();
        this.deviceInfo = `设备型号：${res.model}, 操作系统：${res.system}, 屏幕尺寸：${res.screenWidth}x${res.screenHeight}`;
      } catch (error) {
        console.error('获取设备信息失败：', error);
      }
    }
  }
};
</script>

<style scoped>
text {
  color: #333;
  font-size: 16px;
  line-height: 1.5;
  margin-top: 20px;
}
</style>

三、Vue 3 获取设备信息

1. 使用异步方法 uni.getSystemInfo()

在 Vue 3 中，采用 Composition API 进行状态管理和生命周期管理。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<template>
  <view>
    <text>{{ deviceInfo }}</text>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const deviceInfo = ref('');

onMounted(() => {
  getDeviceInfo();
});

function getDeviceInfo() {
  uni.getSystemInfo({
    success: (res) => {
      deviceInfo.value = `设备型号：${res.model}, 操作系统：${res.system}, 屏幕尺寸：${res.screenWidth}x${res.screenHeight}`;
    },
    fail: (err) => {
      console.error('获取设备信息失败：', err);
    }
  });
}
</script>

<style scoped>
text {
  color: #333;
  font-size: 16px;
  line-height: 1.5;
  margin-top: 20px;
}
</style>

2. 使用同步方法 uni.getSystemInfoSync()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<template>
  <view>
    <text>{{ deviceInfo }}</text>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const deviceInfo = ref('');

onMounted(() => {
  getDeviceInfoSync();
});

function getDeviceInfoSync() {
  try {
    const res = uni.getSystemInfoSync();
    deviceInfo.value = `设备型号：${res.model}, 操作系统：${res.system}, 屏幕尺寸：${res.screenWidth}x${res.screenHeight}`;
  } catch (error) {
    console.error('获取设备信息失败：', error);
  }
}
</script>

<style scoped>
text {
  color: #333;
  font-size: 16px;
  line-height: 1.5;
  margin-top: 20px;
}
</style>

四、Vue 2 与 Vue 3 的差异

特性 Vue 2 Vue 3
生命周期钩子 mounted() onMounted()
响应式数据 data() ref() 或 reactive()
API 调用 uni.getSystemInfo() uni.getSystemInfo()
代码结构 export default script setup

五、常见的设备信息字段

uni.getSystemInfo() 或 uni.getSystemInfoSync() 返回的设备信息包括：

  • model：设备型号，例如 “iPhone 12” 或 “Galaxy S10”。
  • system：操作系统及版本，例如 “iOS 14.4.1” 或 “Android 10”。
  • screenWidth：设备屏幕的宽度（单位：像素）。
  • screenHeight：设备屏幕的高度（单位：像素）。
  • platform：设备平台（如 “iOS”、”Android”、”devtools”）。

参考链接

uniapp 官方文档